{% extends "../../base.html" %}

{% block crumbs %}
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li class="active">
                    <a class="this">Project</a>
                </li>
                <li class="active">
                    <a class="this-page">Test scenario</a>
                </li>
            </ol>
        </div>
    </div>
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-12">
            <div class="panel">
            	<div class="panel-heading">
	                <form>
	            		<div style="display:inline; margin-right: 20px">
	        	    		<a href="/atp4p/scene/add/" class="btn btn-primary">Add Scenario</a>
	        	    	</div>
	        	    	<div style="display:inline;">
	        	    		<a href="#" class="btn btn-warning" onClick="del()">Delete</a>
	        	    	</div>
	            	    <div style="display:inline; float: right;">
		        	    	<input type="button" value="Search" id="select"/>
		        	    </div>
			            <div style="display:inline; float: right; margin-right: 20px">
			        	    <div style="display:inline;">
			        	    	<label style="width: auto;">Project name</label>
			        	    </div>
			        	    <div style="display:inline;">
			        	    	<input type="text" autocomplete="off" tabindex="0" id="project">
			        	    </div>
			        	</div>
	            	</form>
            	</div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                        	<th width="6%"><input type="checkbox" id="box" onclick="checkAll()"></th>
                            <th width='8%'>ID</th>
                            <th>Project name</th>
                            <th>Scenario name</th>
                            <th>Transaction name</th>
                            <th>Thread gradient</th>
                            <th width='16%'>Operation</th>
                        </tr>
                        </thead>
                        <tbody id="content">
                        </tbody>
                    </table>
                    <div id="barcon" name="barcon"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
<script>
	window.onload = select();

	$("#select").click(function(){
	   	select();
	});

	function select() {
	    var project = $("#project").val();
	    var url = `/atp4p/scene/list/?project=${project}`;
	    $.ajax({
			type: 'GET',
			url: url,
			dataType:'json',
			success: function(res){
				var data = res.data;
		    	var len = data.length;
		    	var out = "";
				if(len > 0){
			        for(var i = 0; i < len; i++){
			        	out += 
			        		`<tr>
                        	<td><input type="checkbox" aria-hidden="false" value="${data[i].id}" onclick="check()" name="checkOne"></td>
                            <td>${data[i].id}</td>
                            <td>${data[i].project}</td>
                            <td>${data[i].scene_type}</td>
                            <td>${data[i].trans_name}</td>
                            <td>${data[i].threads}</td>
                            <td>
                                <a href="/atp4p/scene/query?id=${data[i].id}"
                                   class="layui-btn layui-btn-xs">Detail</a>
                                <a href="#" style="color: red" onClick="del(${data[i].id})">Delete</a>
                                <button type="button" onclick="run_button(this)" class="btn btn-primary">Run</button>
                            </td>
                        </tr>`;
					}
	            }
	            $('#content').html(out);
	            goPage(1,10);
			}
		});
	};
</script>

<script>
    function del(id){
    	if (id === undefined){
    		id = new Array();
	    	var checkOnes = document.getElementsByName("checkOne");
	    	if(checkOnes.length>0){
    	    	for(var i=0;i<checkOnes.length;i++){
        	    	if(checkOnes[i].checked){
            			id.push(checkOnes[i].value);
            		}
        		}
			}
			id = id.toString();
		}
		var url = `/atp4p/scene/delete/?id=${id}`;
	    $.ajax({
			type: 'GET',
			url: url,
			dataType:'json',
			success: function(data){
				alert("Successfully delete!");
			},
			error: function(){
				alert("Fail to delete!");
			}
		});
		select();
    };
    
	function run_button(obj) {
    	var project = obj.parentNode.parentNode.children[2].innerText;
    	var id = obj.parentNode.parentNode.children[1].innerText;
        $.ajax({
            type: 'get',
            url: "/atp4p/scene/run/",
            data:
                {
                    "project": project,
                    "id": id,
                },
            success: function (res) {
            	var code = res.code;
            	if(code == 0){
                	alert("Run successfully!");
                }else{
                	alert("Fail to run!"+res.msg);
                }
            },
            error: function (res) {
                alert("Fail to run!"+res);
            }
        });
    };
</script>

{% endblock %}